<template>
  <div class="tool-pdf">
    <w-nav-bar
      title="PDF查看器"/>
    <div class="w-max-btn">
      <x-button
        type="primary"
        @click.native="btnClick(0)">自定义组件</x-button>
      <x-button
        type="primary"
        @click.native="btnClick(1)">PDF.js</x-button>
    </div>
    <confirm
      v-model="showConfirm"
      title="PDF链接"
      @on-confirm="confirmOkBtnClick"
      show-input/>
  </div>
</template>

<script>
  import { XButton, Group, Confirm, TransferDom } from 'vux'
  export default {
    name: "ToolPdf",
    components: {
      XButton, Group, Confirm
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        showConfirm: false,
        type: null
      }
    },
    methods: {
      btnClick(type) {
        this.showConfirm = true
        this.type = type
      },
      confirmOkBtnClick(data) {
        if (!data) {
          this.$w_popview.msgError('请输入文件地址')
          return
        }
        const query = `?file=${data}`
        const url = this.type ? process.env.VUE_APP_PDF_JS : process.env.VUE_APP_PDF_VUE
        console.log('url = ', url)
        window.open(`${ url }${query}`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tool-pdf {

  }
</style>
